<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>动态列表 - 社交圈</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/ajax/ajax/ajax/libs/font-awesome/6.5.1/css/all/all.min.css">
    
    <style>
        :root {
            --primary: #165DFF;
            --secondary: #722ED1;
            --success: #00B42A;
            --warning: #FF7D00;
            --danger: #F53F3F;
            --text-primary: #1D2129;
            --text-secondary: #4E5969;
            --text-tertiary: #86909C;
            --bg-light: #F2F3F5;
            --bg-white: #FFFFFF;
            --border-light: #E5E6EB;
            --radius: 10px;
            --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 112px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .nav-actions {
            display: flex;
            gap: 16px;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        /* 筛选工具栏 */
        .filter-toolbar {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            background-color: var(--bg-white);
            padding: 10px 16px;
            border-bottom: 1px solid var(--border-light);
            z-index: 999;
        }
        
        .search-container {
            position: relative;
            margin-bottom: 10px;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
        }
        
        .filter-actions {
            display: flex;
            justify-content: space-between;
        }
        
        .filter-btn, .sort-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background-color: var(--bg-light);
            border: 1px solid var(--border-light);
            border-radius: 16px;
            color: var(--text-secondary);
            font-size: 13px;
        }
        
        /* 动态分类 */
        .feed-tabs {
            display: flex;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .feed-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .feed-tab {
            padding: 14px 20px;
            white-space: nowrap;
            font-size: 15px;
            font-weight: 500;
            color: var(--text-secondary);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            flex-shrink: 0;
        }
        
        .feed-tab.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
        }
        
        /* 动态列表容器 */
        .feed-container {
            padding: 12px 16px;
        }
        
        /* 动态卡片通用样式 */
        .feed-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 16px;
            overflow: hidden;
        }
        
        /* 动态头部 */
        .feed-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .feed-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid var(--border-light);
        }
        
        .feed-author {
            flex: 1;
        }
        
        .author-name {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .feed-time {
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .feed-menu {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 16px;
        }
        
        /* 动态内容 */
        .feed-content {
            padding: 0 16px 12px;
        }
        
        .feed-text {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 12px;
        }
        
        .feed-text a {
            color: var(--primary);
            text-decoration: none;
        }
        
        /* 无图动态 */
        .feed-no-image .feed-content {
            padding-bottom: 16px;
        }
        
        /* 单图动态 */
        .feed-single-image .feed-image {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .feed-single-image .feed-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 多图动态布局 */
        .feed-multi-image.two-images .feed-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .feed-multi-image.three-images .feed-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .feed-multi-image.three-images .feed-images div:nth-child(3) {
            grid-column: 1 / 3;
        }
        
        .feed-multi-image.four-images .feed-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .feed-multi-image.nine-images .feed-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .feed-multi-image .feed-image {
            aspect-ratio: 1/1;
            overflow: hidden;
            position: relative;
        }
        
        .feed-multi-image .feed-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .feed-multi-image .feed-image:hover img {
            transform: scale(1.05);
        }
        
        /* 图片数量遮罩 */
        .image-count-mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        /* 动态标签和话题 */
        .feed-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .feed-topic {
            color: var(--primary);
            font-size: 14px;
        }
        
        /* 动态统计 */
        .feed-stats {
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .feed-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 动态操作 */
        .feed-actions {
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
        }
        
        .feed-action {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 0;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        .feed-action.liked {
            color: var(--danger);
        }
        
        .feed-action:hover {
            background-color: rgba(0, 0, 0, 0.02);
        }
        
        /* 评论区域 */
        .feed-comments {
            padding: 0 16px 16px;
        }
        
        .comment-item {
            margin-bottom: 12px;
            padding: 8px 10px;
            background-color: var(--bg-light);
            border-radius: 8px;
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        
        .comment-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-author {
            font-size: 13px;
            font-weight: 600;
        }
        
        .comment-time {
            font-size: 11px;
            color: var(--text-tertiary);
            margin-left: auto;
        }
        
        .comment-text {
            font-size: 14px;
            line-height: 1.5;
        }
        
        .comment-text a {
            color: var(--primary);
            text-decoration: none;
        }
        
        .comment-actions {
            display: flex;
            gap: 12px;
            margin-top: 6px;
            font-size: 12px;
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 3px;
            color: var(--text-tertiary);
            background: none;
            border: none;
        }
        
        .comment-action.liked {
            color: var(--danger);
        }
        
        .show-more-comments {
            width: 100%;
            padding: 6px 0;
            background: none;
            border: none;
            color: var(--primary);
            font-size: 13px;
            text-align: center;
        }
        
        /* 评论输入框 */
        .comment-input-container {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-top: 1px solid var(--border-light);
        }
        
        .comment-avatar-input {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-input {
            flex: 1;
            padding: 8px 12px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
        }
        
        .comment-tools {
            display: flex;
            gap: 10px;
            color: var(--text-secondary);
        }
        
        .comment-tool {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 发布动态按钮 */
        .fab-post {
            position: fixed;
            right: 24px;
            bottom: 86px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
            border: none;
            font-size: 24px;
            z-index: 999;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            font-size: 15px;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 筛选弹窗样式 */
        .filter-modal .modal-body {
            padding: 0;
        }
        
        .filter-section {
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .filter-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .filter-option {
            padding: 6px 14px;
            border-radius: 16px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-white);
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
        }
        
        .filter-option.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .filter-footer {
            display: flex;
            padding: 12px 16px;
            gap: 10px;
        }
        
        .filter-btn-cancel, .filter-btn-apply {
            flex: 1;
            padding: 8px 0;
            border-radius: 6px;
            font-size: 15px;
        }
        
        .filter-btn-cancel {
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
        }
        
        .filter-btn-apply {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        /* 排序弹窗 */
        .sort-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-light);
            font-size: 15px;
        }
        
        .sort-option.active .sort-check {
            color: var(--primary);
            display: inline-block;
        }
        
        .sort-check {
            display: none;
        }
        
        /* 骨架屏样式 */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }
        
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* 筛选标签 */
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 0 16px 12px;
        }
        
        .filter-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background-color: rgba(22, 93, 255, 0.1);
            color: var(--primary);
            border-radius: 12px;
            font-size: 12px;
        }
        
        .filter-tag-remove {
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <div class="nav-title">朋友圈</div>
        <div class="nav-actions">
            <button class="nav-btn" id="messageBtn">
                <i class="far fa-bell"></i>
            </button>
            <button class="nav-btn" id="profileBtn">
                <i class="fas fa-user"></i>
            </button>
        </div>
    </div>
    
    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
        <div class="search-container">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索动态、用户或话题...">
        </div>
        <div class="filter-actions">
            <button class="filter-btn" id="filterBtn">
                <i class="fas fa-filter"></i>
                <span>筛选</span>
            </button>
            <button class="sort-btn" id="sortBtn">
                <i class="fas fa-sort"></i>
                <span>排序</span>
            </button>
        </div>
    </div>
    
    <!-- 筛选标签展示区 -->
    <div class="filter-tags" id="filterTags">
        <!-- 筛选标签会动态添加到这里 -->
    </div>
    
    <!-- 动态分类 -->
    <div class="feed-tabs">
        <button class="feed-tab active">全部动态</button>
        <button class="feed-tab">关注</button>
        <button class="feed-tab">推荐</button>
        <button class="feed-tab">热门</button>
        <button class="feed-tab">话题</button>
        <button class="feed-tab">视频</button>
        <button class="feed-tab">图片</button>
    </div>
    
    <!-- 动态列表容器 -->
    <div class="feed-container" id="feedContainer">
        <!-- 无图动态 -->
        <div class="feed-card feed-no-image" data-type="text" data-time="2小时前" data-likes="32">
            <div class="feed-header">
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="feed-avatar">
                <div class="feed-author">
                    <div class="author-name">旅行爱好者</div>
                    <div class="feed-time">
                        <i class="fas fa-clock"></i>
                        <span>2小时前</span>
                    </div>
                </div>
                <button class="feed-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="feed-content">
                <div class="feed-text">
                    刚刚规划好了下一次旅行路线！从青海湖到茶卡盐湖，再到敦煌莫高窟，最后到张掖丹霞地貌。有没有去过的朋友给点建议？特别是交通和住宿方面，还有哪些必吃的当地美食？@背包客小明 @旅行达人
                </div>
                
                <div class="feed-topics">
                    <span class="feed-topic">#青海旅行#</span>
                    <span class="feed-topic">#西北环线#</span>
                    <span class="feed-topic">#旅行攻略#</span>
                </div>
            </div>
            
            <div class="feed-stats">
                <div class="feed-stat">
                    <i class="far fa-heart"></i>
                    <span>32</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-comment"></i>
                    <span>18</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-share-square"></i>
                    <span>5</span>
                </div>
            </div>
            
            <div class="feed-actions">
                <button class="feed-action">
                    <i class="far fa-heart"></i>
                    <span>点赞</span>
                </button>
                <button class="feed-action">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="feed-action">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
            </div>
            
            <div class="feed-comments">
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/91/100/100" alt="评论者头像" class="comment-avatar">
                        <span class="comment-author">背包客小明</span>
                        <span class="comment-time">1小时前</span>
                    </div>
                    <div class="comment-text">
                        青海湖建议住湖边的民宿，可以看日出！茶卡盐湖一定要选晴天去，不然拍不出天空之镜的效果。
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action">
                            <i class="far fa-heart"></i>
                            <span>8</span>
                        </button>
                        <button class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <button class="show-more-comments">
                    查看更多17条评论
                </button>
            </div>
            
            <div class="comment-input-container">
                <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="comment-avatar-input">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-tools">
                    <button class="comment-tool">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="comment-tool">
                        <i class="far fa-smile"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 单图动态 -->
        <div class="feed-card feed-single-image" data-type="image" data-time="昨天 18:30" data-likes="128">
            <div class="feed-header">
                <img src="https://picsum.photos/id/22/100/100" alt="用户头像" class="feed-avatar">
                <div class="feed-author">
                    <div class="author-name">美食博主</div>
                    <div class="feed-time">
                        <i class="fas fa-clock"></i>
                        <span>昨天 18:30</span>
                    </div>
                </div>
                <button class="feed-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="feed-content">
                <div class="feed-text">
                    周末在家尝试做了红烧肉，按照奶奶的秘方改良了一下，加入了一点点陈皮提香，口感更丰富了！第一次做卖相还不错，味道也很赞，分享给大家~
                </div>
                
                <div class="feed-image">
                    <img src="https://picsum.photos/id/292/800/600" alt="动态图片">
                </div>
                
                <div class="feed-topics">
                    <span class="feed-topic">#家常菜#</span>
                    <span class="feed-topic">#红烧肉#</span>
                    <span class="feed-topic">#美食分享#</span>
                </div>
            </div>
            
            <div class="feed-stats">
                <div class="feed-stat">
                    <i class="far fa-heart"></i>
                    <span>128</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-comment"></i>
                    <span>46</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-share-square"></i>
                    <span>23</span>
                </div>
            </div>
            
            <div class="feed-actions">
                <button class="feed-action liked">
                    <i class="fas fa-heart"></i>
                    <span>已赞</span>
                </button>
                <button class="feed-action">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="feed-action">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
            </div>
            
            <div class="feed-comments">
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/45/100/100" alt="评论者头像" class="comment-avatar">
                        <span class="comment-author">吃货小王</span>
                        <span class="comment-time">昨天 19:15</span>
                    </div>
                    <div class="comment-text">
                        看起来太美味了！能分享一下具体做法吗？特别是酱汁的调配比例~
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action liked">
                            <i class="fas fa-heart"></i>
                            <span>24</span>
                        </button>
                        <button class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/22/100/100" alt="评论者头像" class="comment-avatar">
                        <span class="comment-author">美食博主</span>
                        <span class="comment-time">昨天 20:05</span>
                    </div>
                    <div class="comment-text">
                        @吃货小王 没问题！主要是冰糖炒糖色，然后加生抽、老抽、料酒和一点点醋，陈皮泡软后一起炖~ 具体比例我整理一下发出来
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action">
                            <i class="far fa-heart"></i>
                            <span>12</span>
                        </button>
                        <button class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <button class="show-more-comments">
                    查看更多44条评论
                </button>
            </div>
            
            <div class="comment-input-container">
                <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="comment-avatar-input">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-tools">
                    <button class="comment-tool">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="comment-tool">
                        <i class="far fa-smile"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 多图动态（2张） -->
        <div class="feed-card feed-multi-image two-images" data-type="image" data-time="3天前" data-likes="95">
            <div class="feed-header">
                <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="feed-avatar">
                <div class="feed-author">
                    <div class="author-name">摄影爱好者</div>
                    <div class="feed-time">
                        <i class="fas fa-clock"></i>
                        <span>3天前</span>
                    </div>
                </div>
                <button class="feed-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="feed-content">
                <div class="feed-text">
                    清晨的海边日出，用长曝光拍了海浪的丝绸效果，另一张是正常曝光的瞬间。同一地点不同参数的对比，你更喜欢哪一张？
                </div>
                
                <div class="feed-images">
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1015/600/600" alt="动态图片1">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1019/600/600" alt="动态图片2">
                    </div>
                </div>
                
                <div class="feed-topics">
                    <span class="feed-topic">#摄影技巧#</span>
                    <span class="feed-topic">#海边日出#</span>
                    <span class="feed-topic">#长曝光#</span>
                </div>
            </div>
            
            <div class="feed-stats">
                <div class="feed-stat">
                    <i class="far fa-heart"></i>
                    <span>95</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-comment"></i>
                    <span>31</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-share-square"></i>
                    <span>12</span>
                </div>
            </div>
            
            <div class="feed-actions">
                <button class="feed-action">
                    <i class="far fa-heart"></i>
                    <span>点赞</span>
                </button>
                <button class="feed-action">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="feed-action">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
            </div>
            
            <div class="comment-input-container">
                <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="comment-avatar-input">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-tools">
                    <button class="comment-tool">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="comment-tool">
                        <i class="far fa-smile"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <button class="load-more" id="loadMoreBtn">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多动态</span>
        </button>
    </div>
    
    <!-- 发布动态按钮 -->
    <button class="fab-post" id="postBtn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item active">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- 动态操作菜单 -->
    <div class="modal fade" id="feedMenuModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-share-alt me-2"></i> 分享动态
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-bookmark me-2"></i> 收藏动态
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-flag me-2"></i> 举报动态
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0 text-danger" style="font-size: 15px;">
                        <i class="fas fa-ban me-2"></i> 屏蔽作者
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 筛选弹窗 -->
    <div class="modal fade filter-modal" id="filterModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">筛选条件</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 内容类型筛选 -->
                    <div class="filter-section">
                        <div class="filter-title">内容类型</div>
                        <div class="filter-options">
                            <div class="filter-option active" data-filter="type" data-value="all">全部</div>
                            <div class="filter-option" data-filter="type" data-value="text">纯文字</div>
                            <div class="filter-option" data-filter="type" data-value="image">图片</div>
                            <div class="filter-option" data-filter="type" data-value="video">视频</div>
                        </div>
                    </div>
                    
                    <!-- 时间范围筛选 -->
                    <div class="filter-section">
                        <div class="filter-title">时间范围</div>
                        <div class="filter-options">
                            <div class="filter-option active" data-filter="time" data-value="all">全部时间</div>
                            <div class="filter-option" data-filter="time" data-value="today">今天</div>
                            <div class="filter-option" data-filter="time" data-value="week">本周</div>
                            <div class="filter-option" data-filter="time" data-value="month">本月</div>
                            <div class="filter-option" data-filter="time" data-value="year">今年</div>
                        </div>
                    </div>
                    
                    <!-- 互动量筛选 -->
                    <div class="filter-section">
                        <div class="filter-title">互动量</div>
                        <div class="filter-options">
                            <div class="filter-option active" data-filter="popularity" data-value="all">不限</div>
                            <div class="filter-option" data-filter="popularity" data-value="high">高互动</div>
                            <div class="filter-option" data-filter="popularity" data-value="medium">中等互动</div>
                            <div class="filter-option" data-filter="popularity" data-value="low">低互动</div>
                        </div>
                    </div>
                </div>
                <div class="filter-footer">
                    <button type="button" class="filter-btn-cancel" id="resetFilterBtn">重置</button>
                    <button type="button" class="filter-btn-apply" id="applyFilterBtn" data-bs-dismiss="modal">应用筛选</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 排序弹窗 -->
    <div class="modal fade" id="sortModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">排序方式</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="sort-option active" data-sort="latest">
                        <span>最新发布</span>
                        <i class="fas fa-check sort-check"></i>
                    </div>
                    <div class="sort-option" data-sort="popular">
                        <span>热门程度</span>
                        <i class="fas fa-check sort-check"></i>
                    </div>
                    <div class="sort-option" data-sort="commented">
                        <span>评论最多</span>
                        <i class="fas fa-check sort-check"></i>
                    </div>
                    <div class="sort-option" data-sort="random">
                        <span>随机推荐</span>
                        <i class="fas fa-check sort-check"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const searchInput = document.querySelector('.search-input');
        const filterBtn = document.getElementById('filterBtn');
        const sortBtn = document.getElementById('sortBtn');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const postBtn = document.getElementById('postBtn');
        const messageBtn = document.getElementById('messageBtn');
        const profileBtn = document.getElementById('profileBtn');
        const feedTabs = document.querySelectorAll('.feed-tab');
        const feedContainer = document.getElementById('feedContainer');
        const filterTags = document.getElementById('filterTags');
        const toast = document.getElementById('toast');
        const filterModal = new bootstrap.Modal(document.getElementById('filterModal'));
        const sortModal = new bootstrap.Modal(document.getElementById('sortModal'));
        const feedMenuModal = new bootstrap.Modal(document.getElementById('feedMenuModal'));
        const applyFilterBtn = document.getElementById('applyFilterBtn');
        const resetFilterBtn = document.getElementById('resetFilterBtn');
        const filterOptions = document.querySelectorAll('.filter-option');
        const sortOptions = document.querySelectorAll('.sort-option');
        
        // 筛选状态
        let filterState = {
            type: 'all',
            time: 'all',
            popularity: 'all',
            search: '',
            tab: '全部动态',
            sort: 'latest'
        };
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 更新筛选标签显示
        function updateFilterTags() {
            filterTags.innerHTML = '';
            
            // 添加搜索标签
            if (filterState.search) {
                addFilterTag('搜索', filterState.search, 'search');
            }
            
            // 添加类型标签
            if (filterState.type !== 'all') {
                const typeText = {
                    'text': '纯文字',
                    'image': '图片',
                    'video': '视频'
                }[filterState.type] || filterState.type;
                addFilterTag('类型', typeText, 'type');
            }
            
            // 添加时间标签
            if (filterState.time !== 'all') {
                const timeText = {
                    'today': '今天',
                    'week': '本周',
                    'month': '本月',
                    'year': '今年'
                }[filterState.time] || filterState.time;
                addFilterTag('时间', timeText, 'time');
            }
            
            // 添加互动量标签
            if (filterState.popularity !== 'all') {
                const popularityText = {
                    'high': '高互动',
                    'medium': '中等互动',
                    'low': '低互动'
                }[filterState.popularity] || filterState.popularity;
                addFilterTag('互动', popularityText, 'popularity');
            }
            
            // 添加排序标签
            if (filterState.sort !== 'latest') {
                const sortText = {
                    'popular': '热门程度',
                    'commented': '评论最多',
                    'random': '随机推荐'
                }[filterState.sort] || filterState.sort;
                addFilterTag('排序', sortText, 'sort');
            }
            
            // 添加分类标签
            if (filterState.tab !== '全部动态') {
                addFilterTag('分类', filterState.tab, 'tab');
            }
            
            // 如果有筛选条件，添加清除全部按钮
            if (filterTags.children.length > 0) {
                const clearAllTag = document.createElement('div');
                clearAllTag.className = 'filter-tag';
                clearAllTag.innerHTML = `
                    <i class="fas fa-times"></i>
                    <span>清除全部</span>
                `;
                clearAllTag.addEventListener('click', clearAllFilters);
                filterTags.appendChild(clearAllTag);
            }
        }
        
        // 添加筛选标签
        function addFilterTag(label, value, type) {
            const tag = document.createElement('div');
            tag.className = 'filter-tag';
            tag.innerHTML = `
                <span>${label}: ${value}</span>
                <button class="filter-tag-remove" data-type="${type}">
                    <i class="fas fa-times"></i>
                </button>
            `;
            filterTags.appendChild(tag);
            
            // 绑定移除标签事件
            tag.querySelector('.filter-tag-remove').addEventListener('click', function(e) {
                e.stopPropagation();
                const filterType = this.getAttribute('data-type');
                
                // 重置对应筛选条件
                if (filterType === 'type') {
                    filterState.type = 'all';
                    updateFilterOptions('type', 'all');
                } else if (filterType === 'time') {
                    filterState.time = 'all';
                    updateFilterOptions('time', 'all');
                } else if (filterType === 'popularity') {
                    filterState.popularity = 'all';
                    updateFilterOptions('popularity', 'all');
                } else if (filterType === 'search') {
                    filterState.search = '';
                    searchInput.value = '';
                } else if (filterType === 'sort') {
                    filterState.sort = 'latest';
                    updateSortOptions('latest');
                } else if (filterType === 'tab') {
                    filterState.tab = '全部动态';
                    feedTabs.forEach(tab => {
                        if (tab.textContent === '全部动态') {
                            tab.classList.add('active');
                        } else {
                            tab.classList.remove('active');
                        }
                    });
                }
                
                // 应用筛选
                applyFilters();
            });
        }
        
        // 更新筛选选项状态
        function updateFilterOptions(filterType, value) {
            filterOptions.forEach(option => {
                if (option.getAttribute('data-filter') === filterType) {
                    if (option.getAttribute('data-value') === value) {
                        option.classList.add('active');
                    } else {
                        option.classList.remove('active');
                    }
                }
            });
        }
        
        // 更新排序选项状态
        function updateSortOptions(value) {
            sortOptions.forEach(option => {
                if (option.getAttribute('data-sort') === value) {
                    option.classList.add('active');
                } else {
                    option.classList.remove('active');
                }
            });
        }
        
        // 清除所有筛选条件
        function clearAllFilters() {
            // 重置筛选状态
            filterState = {
                type: 'all',
                time: 'all',
                popularity: 'all',
                search: '',
                tab: '全部动态',
                sort: 'latest'
            };
            
            // 更新UI
            searchInput.value = '';
            updateFilterOptions('type', 'all');
            updateFilterOptions('time', 'all');
            updateFilterOptions('popularity', 'all');
            updateSortOptions('latest');
            
            feedTabs.forEach(tab => {
                if (tab.textContent === '全部动态') {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });
            
            // 应用筛选
            applyFilters();
        }
        
        // 应用筛选条件
        function applyFilters() {
            // 更新筛选标签
            updateFilterTags();
            
            // 获取所有动态卡片
            const feedCards = document.querySelectorAll('.feed-card');
            let visibleCount = 0;
            
            // 对每个卡片应用筛选
            feedCards.forEach(card => {
                let isVisible = true;
                
                // 类型筛选
                if (filterState.type !== 'all' && card.getAttribute('data-type') !== filterState.type) {
                    isVisible = false;
                }
                
                // 搜索筛选
                if (filterState.search && isVisible) {
                    const text = card.textContent.toLowerCase();
                    const searchTerm = filterState.search.toLowerCase();
                    if (!text.includes(searchTerm)) {
                        isVisible = false;
                    }
                }
                
                // 分类标签筛选
                if (filterState.tab === '图片' && isVisible && card.getAttribute('data-type') !== 'image') {
                    isVisible = false;
                }
                
                if (filterState.tab === '视频' && isVisible && card.getAttribute('data-type') !== 'video') {
                    isVisible = false;
                }
                
                // 互动量筛选
                if (filterState.popularity !== 'all' && isVisible) {
                    const likes = parseInt(card.getAttribute('data-likes'));
                    if (filterState.popularity === 'high' && likes < 100) {
                        isVisible = false;
                    } else if (filterState.popularity === 'medium' && (likes < 20 || likes >= 100)) {
                        isVisible = false;
                    } else if (filterState.popularity === 'low' && likes >= 20) {
                        isVisible = false;
                    }
                }
                
                // 显示或隐藏卡片
                if (isVisible) {
                    card.style.display = '';
                    visibleCount++;
                } else {
                    card.style.display = 'none';
                }
            });
            
            // 排序
            sortFeeds();
            
            // 显示结果提示
            showToast(`找到 ${visibleCount} 条符合条件的动态`);
        }
        
        // 排序动态
        function sortFeeds() {
            const feedCards = Array.from(document.querySelectorAll('.feed-card:not([style*="display: none"])'));
            const container = document.getElementById('feedContainer');
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            
            // 先移除所有可见卡片
            feedCards.forEach(card => {
                container.removeChild(card);
            });
            
            // 根据排序条件排序
            if (filterState.sort === 'popular') {
                // 按点赞数排序
                feedCards.sort((a, b) => {
                    return parseInt(b.getAttribute('data-likes')) - parseInt(a.getAttribute('data-likes'));
                });
            } else if (filterState.sort === 'commented') {
                // 按评论数排序
                feedCards.sort((a, b) => {
                    const aComments = parseInt(a.querySelector('.feed-stat:nth-child(2) span').textContent);
                    const bComments = parseInt(b.querySelector('.feed-stat:nth-child(2) span').textContent);
                    return bComments - aComments;
                });
            } else if (filterState.sort === 'random') {
                // 随机排序
                feedCards.sort(() => Math.random() - 0.5);
            }
            // 默认按最新发布排序，不需要额外处理
            
            // 将排序后的卡片添加回容器
            feedCards.forEach(card => {
                container.insertBefore(card, loadMoreBtn);
            });
        }
        
        // 绑定筛选选项事件
        function bindFilterOptions() {
            filterOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const filterType = this.getAttribute('data-filter');
                    const value = this.getAttribute('data-value');
                    
                    // 更新筛选状态
                    filterState[filterType] = value;
                    
                    // 更新UI
                    updateFilterOptions(filterType, value);
                });
            });
        }
        
        // 绑定排序选项事件
        function bindSortOptions() {
            sortOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const value = this.getAttribute('data-sort');
                    
                    // 更新排序状态
                    filterState.sort = value;
                    
                    // 更新UI
                    updateSortOptions(value);
                    
                    // 关闭弹窗并应用排序
                    sortModal.hide();
                    applyFilters();
                });
            });
        }
        
        // 绑定其他事件
        function bindEvents() {
            // 筛选按钮
            filterBtn.addEventListener('click', () => {
                filterModal.show();
            });
            
            // 排序按钮
            sortBtn.addEventListener('click', () => {
                sortModal.show();
            });
            
            // 应用筛选按钮
            applyFilterBtn.addEventListener('click', applyFilters);
            
            // 重置筛选按钮
            resetFilterBtn.addEventListener('click', () => {
                const currentType = filterState.type;
                const currentTime = filterState.time;
                const currentPopularity = filterState.popularity;
                
                // 重置筛选选项
                filterState.type = 'all';
                filterState.time = 'all';
                filterState.popularity = 'all';
                
                // 更新UI
                updateFilterOptions('type', 'all');
                updateFilterOptions('time', 'all');
                updateFilterOptions('popularity', 'all');
            });
            
            // 搜索框事件
            searchInput.addEventListener('keyup', function(e) {
                filterState.search = this.value.trim();
                
                // 按回车或输入完成后应用筛选
                if (e.key === 'Enter' || this.value.length % 3 === 0) {
                    applyFilters();
                }
            });
            
            // 分类标签切换
            feedTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabText = this.textContent;
                    filterState.tab = tabText;
                    
                    feedTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    applyFilters();
                });
            });
            
            // 加载更多
            loadMoreBtn.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span> 加载中...</span>';
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-plus"></i><span> 加载更多动态</span>';
                    showToast('已加载更多动态');
                }, 1500);
            });
            
            // 发布动态按钮
            postBtn.addEventListener('click', () => {
                showToast('进入发布动态页面');
            });
            
            // 消息按钮
            messageBtn.addEventListener('click', () => {
                showToast('查看消息通知');
            });
            
            // 个人资料按钮
            profileBtn.addEventListener('click', () => {
                showToast('进入个人中心');
            });
            
            // 动态菜单按钮
            document.querySelectorAll('.feed-menu').forEach(menu => {
                menu.addEventListener('click', function() {
                    feedMenuModal.show();
                });
            });
            
            // 点赞功能
            document.querySelectorAll('.feed-action').forEach(btn => {
                if (btn.querySelector('.fa-heart')) {
                    btn.addEventListener('click', function() {
                        const icon = this.querySelector('i');
                        const text = this.querySelector('span');
                        const statEl = this.closest('.feed-card').querySelector('.feed-stat .fa-heart').parentElement.querySelector('span');
                        let count = parseInt(statEl.textContent);
                        const card = this.closest('.feed-card');
                        
                        if (this.classList.contains('liked')) {
                            this.classList.remove('liked');
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            text.textContent = '点赞';
                            statEl.textContent = count - 1;
                            card.setAttribute('data-likes', count - 1);
                            showToast('已取消点赞');
                        } else {
                            this.classList.add('liked');
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            text.textContent = '已赞';
                            statEl.textContent = count + 1;
                            card.setAttribute('data-likes', count + 1);
                            showToast('点赞成功');
                        }
                        
                        // 如果当前是按热门排序，重新排序
                        if (filterState.sort === 'popular') {
                            sortFeeds();
                        }
                    });
                }
            });
        }
        
        // 初始化
        function init() {
            bindFilterOptions();
            bindSortOptions();
            bindEvents();
            updateFilterTags();
        }
        
        // 启动
        init();
    </script>
</body>
</html>
